<!--
 @description 立面列表
 @fileName Items.vue
 @author zengqiongying
 @created 2023/06/17 16:22:28
-->
<template>
  <div class="facede-list">
    <div
      v-for="(item, i) in list"
      :key="i"
      :class="[
        'item',
        { 'checked-half': [2, '2'].includes(item.facadeStatus) },
        { checked: [3, '3'].includes(item.facadeStatus) },
        { disabled: !enableAccept(item) }
      ]"
      @click="toDetail(item)"
    >
      {{ item.facadeName }}
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  export default defineComponent({
    name: 'FacadeItems',
    components: {},
    props: {
      acceptMold: {
        // 验收类型:用于判断是否为硬装(按序验收)  softCheck 软装验收 、 hardCheck 硬装验收
        type: String,
        default: ''
      },
      acceptLastFacadeNumber: {
        // 验收立面可操作的立面序号 (只针对硬装有效)
        type: Number,
        default: -1
      },
      readonly: {
        // 是否只读
        type: Boolean,
        default: false
      },
      list: {
        type: Array,
        default: () => []
      }
    },
    emits: ['detail'],
    setup(props, { emit }) {
      // facadeStatus: 1.未验收 2.未验收完成 3.验收完成
      const toDetail = (facade: any) => {
        if (!enableAccept(facade)) {
          return
        }
        emit('detail', facade.sfid)
      }
      // 最后一次编辑的立面数
      const checkFacade = computed(() => {
        const checks = props.list.filter((v: any) => [2, 3, '2', '3'].includes(v.facadeStatus))
        let facedeSortNumber = 0
        if (checks.length > 0) {
          const obj: any = checks[checks.length - 1]
          if (obj) {
            facedeSortNumber = Number(obj.sortNumber || 0) + 1
          }
        }
        return facedeSortNumber
      })

      // 判断当前立面是否可验收 （硬装必须按序验收）
      const enableAccept = (item: any) => {
        // const acceptLastFacadeNumber = Number(checkFacade.value || 0)
        if (props.readonly || props.acceptMold === 'softCheck' || props.acceptLastFacadeNumber === 0) return true

        const acceptLastFacadeNumber = props.acceptLastFacadeNumber || 0

        const none: any[] = [null, undefined, '']
        if ([1, '1'].includes(item.sortNumber)) {
          return true
        }
        if (none.includes(acceptLastFacadeNumber)) {
          return false
        }
        const facade = Number(item.sortNumber)
        return facade <= acceptLastFacadeNumber
      }

      return {
        toDetail,
        enableAccept
      }
    }
  })
</script>
<style lang="less" scoped>
  .facede-list {
    display: flex;
    flex-wrap: wrap;
    // --width: calc((100vw - 14px - 14px - 24px) / 4);
    margin-left: -6px;
    .item {
      display: inline-flex;
      align-items: center;
      width: calc(25% - 6px);
      padding: 8px 0;
      min-height: 40px;
      margin-left: 6px;
      padding-left: 32px;
      box-sizing: border-box;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-size: 24px 24px;
      background-repeat: no-repeat;
      background-position: left center;
      background-image: url(~@/assets/images/checkbox.png);
      &.checked-half {
        background-image: url(~@/assets/images/checkbox-half-check.png);
      }
      &.checked {
        background-image: url(~@/assets/images/checkbox-check.png);
      }
      &.disabled {
        background-image: url(~@/assets/images/checkbox-disabled.png);
      }
    }
  }
</style>
